<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>举报管理 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #dc3545;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 筛选栏 */
    .filter-bar {
      background-color: white;
      padding: 12px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
    }
    
    .filter-label {
      font-size: 14px;
      color: #666;
    }
    
    .filter-select {
      background-color: #f8f9fa;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 6px 30px 6px 12px;
      font-size: 14px;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
    }
    
    /* 搜索框 */
    .search-box {
      padding: 10px 15px;
      background-color: white;
    }
    
    .search-input {
      width: 100%;
      background-color: #f8f9fa;
      border: 1px solid #ddd;
      border-radius: 20px;
      padding: 10px 15px 10px 40px;
      font-size: 14px;
      outline: none;
    }
    
    .search-input:focus {
      border-color: #dc3545;
    }
    
    .search-icon {
      position: relative;
      left: 30px;
      color: #999;
      z-index: 1;
    }
    
    /* 内容导航 */
    .content-tabs {
      display: flex;
      background-color: white;
      border-bottom: 1px solid #eee;
      overflow-x: auto;
      scrollbar-width: none;
    }
    
    .content-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .tab-item {
      padding: 12px 20px;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #666;
      white-space: nowrap;
      border-bottom: 3px solid transparent;
    }
    
    .tab-item.active {
      color: #dc3545;
      border-bottom-color: #dc3545;
    }
    
    .tab-item .badge {
      margin-left: 5px;
      background-color: #f1f1f1;
      color: #666;
      font-size: 11px;
      padding: 2px 6px;
    }
    
    .tab-item.active .badge {
      background-color: #dc3545;
      color: white;
    }
    
    /* 内容区域 */
    .tab-content {
      display: none;
    }
    
    .tab-content.active {
      display: block;
    }
    
    /* 举报列表项 */
    .report-list {
      margin-bottom: 15px;
    }
    
    .report-item {
      background-color: white;
      border-radius: 10px;
      margin: 0 15px 10px;
      padding: 15px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      border-left: 4px solid transparent;
    }
    
    .report-item.pending {
      border-left-color: #ffc107;
    }
    
    .report-item.processing {
      border-left-color: #17a2b8;
    }
    
    .report-item.resolved {
      border-left-color: #28a745;
    }
    
    .report-item.rejected {
      border-left-color: #6c757d;
    }
    
    .report-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    
    .report-user {
      display: flex;
      align-items: center;
    }
    
    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 10px;
      object-fit: cover;
    }
    
    .user-info {
      line-height: 1.3;
    }
    
    .user-name {
      font-size: 15px;
      font-weight: 500;
    }
    
    .report-time {
      font-size: 12px;
      color: #999;
    }
    
    .report-status {
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 12px;
      font-weight: 500;
    }
    
    .status-pending {
      background-color: #fff3cd;
      color: #856404;
    }
    
    .status-processing {
      background-color: #d1ecf1;
      color: #0c5460;
    }
    
    .status-resolved {
      background-color: #d4edda;
      color: #155724;
    }
    
    .status-rejected {
      background-color: #e2e3e5;
      color: #495057;
    }
    
    .report-content {
      margin-bottom: 12px;
      font-size: 14px;
      line-height: 1.5;
    }
    
    /* 图片容器样式 */
    .report-images {
      margin-bottom: 12px;
      display: flex;
      gap: 5px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .report-image {
      width: 80px;
      height: 80px;
      border-radius: 6px;
      flex-shrink: 0;
      object-fit: cover;
      background-color: #f8f9fa;
      position: relative;
    }
    
    .image-count {
      position: absolute;
      top: 0;
      right: 0;
      background-color: rgba(0,0,0,0.5);
      color: white;
      font-size: 10px;
      padding: 2px 5px;
      border-radius: 0 0 0 4px;
    }
    
    /* 举报原因 */
    .report-reason {
      background-color: #f8f9fa;
      border-radius: 6px;
      padding: 10px;
      margin-bottom: 12px;
    }
    
    .reason-title {
      font-size: 13px;
      font-weight: 600;
      color: #dc3545;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .reason-content {
      font-size: 13px;
      color: #555;
    }
    
    /* 操作按钮 */
    .report-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    
    .action-btn {
      padding: 5px 12px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 500;
      border: none;
      cursor: pointer;
    }
    
    .btn-primary {
      background-color: #dc3545;
      color: white;
    }
    
    .btn-secondary {
      background-color: #f1f1f1;
      color: #666;
    }
    
    /* 详情弹窗 */
    .detail-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.7);
      z-index: 1000;
      display: none;
      overflow-y: auto;
      padding: 20px 0;
    }
    
    .detail-modal.active {
      display: block;
    }
    
    .modal-content {
      background-color: white;
      border-radius: 12px;
      width: 92%;
      margin: 0 auto;
      max-width: 500px;
      overflow: hidden;
    }
    
    .modal-header {
      padding: 15px 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .modal-title {
      font-size: 17px;
      font-weight: 600;
    }
    
    .close-modal {
      background: none;
      border: none;
      font-size: 20px;
      color: #999;
      cursor: pointer;
    }
    
    .modal-body {
      padding: 15px;
    }
    
    .detail-section {
      margin-bottom: 20px;
    }
    
    .detail-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #333;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .detail-content {
      font-size: 14px;
      line-height: 1.6;
      color: #555;
    }
    
    .detail-images {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 15px;
    }
    
    .detail-image {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 8px;
      object-fit: cover;
    }
    
    .detail-meta {
      background-color: #f8f9fa;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 15px;
    }
    
    .meta-item {
      display: flex;
      margin-bottom: 8px;
      font-size: 14px;
    }
    
    .meta-item:last-child {
      margin-bottom: 0;
    }
    
    .meta-label {
      width: 80px;
      color: #666;
      flex-shrink: 0;
    }
    
    .meta-value {
      flex: 1;
    }
    
    .processing-notes {
      background-color: #fff3cd;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 15px;
      border-left: 3px solid #ffc107;
    }
    
    .notes-title {
      font-weight: 600;
      margin-bottom: 5px;
      font-size: 14px;
      color: #856404;
    }
    
    .notes-content {
      font-size: 14px;
      color: #555;
    }
    
    .modal-footer {
      padding: 15px;
      border-top: 1px solid #eee;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
    
    .modal-btn {
      padding: 8px 20px;
      border-radius: 6px;
      font-size: 15px;
      font-weight: 500;
      border: none;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-link {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-link.active {
      color: #dc3545;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 空状态 */
    .empty-state {
      padding: 60px 20px;
      text-align: center;
      color: #999;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 15px;
      color: #ddd;
    }
    
    .empty-text {
      font-size: 16px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-white" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">举报管理</h1>
    <div class="text-white">
      <i class="fa fa-cog"></i>
    </div>
  </div>
  
  <!-- 筛选栏 -->
  <div class="filter-bar">
    <div class="filter-label">时间范围:</div>
    <select class="filter-select">
      <option>全部时间</option>
      <option selected>近7天</option>
      <option>近30天</option>
      <option>自定义</option>
    </select>
  </div>
  
  <!-- 搜索框 -->
  <div class="search-box">
    <i class="fa fa-search search-icon"></i>
    <input type="text" class="search-input" placeholder="搜索举报内容、用户...">
  </div>
  
  <!-- 内容导航 -->
  <div class="content-tabs">
    <div class="tab-item active" data-tab="all">
      全部 <span class="badge">12</span>
    </div>
    <div class="tab-item" data-tab="pending">
      待处理 <span class="badge">5</span>
    </div>
    <div class="tab-item" data-tab="processing">
      处理中 <span class="badge">3</span>
    </div>
    <div class="tab-item" data-tab="resolved">
      已解决 <span class="badge">4</span>
    </div>
    <div class="tab-item" data-tab="rejected">
      已驳回 <span class="badge">0</span>
    </div>
  </div>
  
  <!-- 全部举报 -->
  <div class="tab-content active" id="all">
    <div class="report-list">
      <!-- 多图举报 -->
      <div class="report-item pending" data-id="1">
        <div class="report-header">
          <div class="report-user">
            <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">阳光正好</div>
              <div class="report-time">今天 09:24</div>
            </div>
          </div>
          <div class="report-status status-pending">待处理</div>
        </div>
        
        <div class="report-content">
          这个人发布的内容包含低俗图片，多次发布类似内容，严重影响社区氛围。
        </div>
        
        <div class="report-images">
          <div class="report-image">
            <img src="https://picsum.photos/200/200?random=10" alt="举报图片" class="report-image">
            <div class="image-count">1/3</div>
          </div>
          <div class="report-image">
            <img src="https://picsum.photos/200/200?random=11" alt="举报图片" class="report-image">
          </div>
          <div class="report-image">
            <img src="https://picsum.photos/200/200?random=12" alt="举报图片" class="report-image">
          </div>
        </div>
        
        <div class="report-reason">
          <div class="reason-title">
            <i class="fa fa-flag"></i> 举报原因
          </div>
          <div class="reason-content">发布低俗色情内容，违反社区规定第3条</div>
        </div>
        
        <div class="report-actions">
          <button class="action-btn btn-secondary">查看</button>
          <button class="action-btn btn-primary">处理</button>
        </div>
      </div>
      
      <!-- 单图举报 -->
      <div class="report-item processing" data-id="2">
        <div class="report-header">
          <div class="report-user">
            <img src="https://picsum.photos/100/100?random=2" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">旅行者</div>
              <div class="report-time">昨天 16:45</div>
            </div>
          </div>
          <div class="report-status status-processing">处理中</div>
        </div>
        
        <div class="report-content">
          该用户发布的内容涉及虚假宣传，声称可以提供特殊服务，可能存在诈骗风险。
        </div>
        
        <div class="report-images">
          <div class="report-image">
            <img src="https://picsum.photos/200/200?random=13" alt="举报图片" class="report-image">
            <div class="image-count">1/1</div>
          </div>
        </div>
        
        <div class="report-reason">
          <div class="reason-title">
            <i class="fa fa-flag"></i> 举报原因
          </div>
          <div class="reason-content">虚假宣传，涉嫌诈骗，违反社区规定第7条</div>
        </div>
        
        <div class="report-actions">
          <button class="action-btn btn-secondary">查看</button>
          <button class="action-btn btn-primary">处理</button>
        </div>
      </div>
      
      <!-- 无图举报 -->
      <div class="report-item resolved" data-id="3">
        <div class="report-header">
          <div class="report-user">
            <img src="https://picsum.photos/100/100?random=3" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">音乐爱好者</div>
              <div class="report-time">2023-10-25 11:30</div>
            </div>
          </div>
          <div class="report-status status-resolved">已解决</div>
        </div>
        
        <div class="report-content">
          在评论区对我进行人身攻击和辱骂，言语非常难听，已经影响到我的正常使用。
        </div>
        
        <div class="report-reason">
          <div class="reason-title">
            <i class="fa fa-flag"></i> 举报原因
          </div>
          <div class="reason-content">人身攻击，辱骂他人，违反社区规定第2条</div>
        </div>
        
        <div class="report-actions">
          <button class="action-btn btn-secondary">查看</button>
          <button class="action-btn btn-primary">详情</button>
        </div>
      </div>
      
      <!-- 多图举报 -->
      <div class="report-item pending" data-id="4">
        <div class="report-header">
          <div class="report-user">
            <img src="https://picsum.photos/100/100?random=4" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">读书达人</div>
              <div class="report-time">2023-10-24 20:15</div>
            </div>
          </div>
          <div class="report-status status-pending">待处理</div>
        </div>
        
        <div class="report-content">
          该用户发布的内容包含盗版书籍的扫描件，涉及版权侵权问题，希望平台处理。
        </div>
        
        <div class="report-images">
          <div class="report-image">
            <img src="https://picsum.photos/200/200?random=14" alt="举报图片" class="report-image">
            <div class="image-count">1/2</div>
          </div>
          <div class="report-image">
            <img src="https://picsum.photos/200/200?random=15" alt="举报图片" class="report-image">
          </div>
        </div>
        
        <div class="report-reason">
          <div class="reason-title">
            <i class="fa fa-flag"></i> 举报原因
          </div>
          <div class="reason-content">版权侵权，发布盗版内容，违反社区规定第9条</div>
        </div>
        
        <div class="report-actions">
          <button class="action-btn btn-secondary">查看</button>
          <button class="action-btn btn-primary">处理</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 待处理举报 -->
  <div class="tab-content" id="pending">
    <div class="report-list">
      <!-- 多图举报 -->
      <div class="report-item pending" data-id="1">
        <div class="report-header">
          <div class="report-user">
            <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">阳光正好</div>
              <div class="report-time">今天 09:24</div>
            </div>
          </div>
          <div class="report-status status-pending">待处理</div>
        </div>
        
        <div class="report-content">
          这个人发布的内容包含低俗图片，多次发布类似内容，严重影响社区氛围。
        </div>
        
        <div class="report-images">
          <div class="report-image">
            <img src="https://picsum.photos/200/200?random=10" alt="举报图片" class="report-image">
            <div class="image-count">1/3</div>
          </div>
          <div class="report-image">
            <img src="https://picsum.photos/200/200?random=11" alt="举报图片" class="report-image">
          </div>
          <div class="report-image">
            <img src="https://picsum.photos/200/200?random=12" alt="举报图片" class="report-image">
          </div>
        </div>
        
        <div class="report-reason">
          <div class="reason-title">
            <i class="fa fa-flag"></i> 举报原因
          </div>
          <div class="reason-content">发布低俗色情内容，违反社区规定第3条</div>
        </div>
        
        <div class="report-actions">
          <button class="action-btn btn-secondary">查看</button>
          <button class="action-btn btn-primary">处理</button>
        </div>
      </div>
      
      <!-- 多图举报 -->
      <div class="report-item pending" data-id="4">
        <div class="report-header">
          <div class="report-user">
            <img src="https://picsum.photos/100/100?random=4" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">读书达人</div>
              <div class="report-time">2023-10-24 20:15</div>
            </div>
          </div>
          <div class="report-status status-pending">待处理</div>
        </div>
        
        <div class="report-content">
          该用户发布的内容包含盗版书籍的扫描件，涉及版权侵权问题，希望平台处理。
        </div>
        
        <div class="report-images">
          <div class="report-image">
            <img src="https://picsum.photos/200/200?random=14" alt="举报图片" class="report-image">
            <div class="image-count">1/2</div>
          </div>
          <div class="report-image">
            <img src="https://picsum.photos/200/200?random=15" alt="举报图片" class="report-image">
          </div>
        </div>
        
        <div class="report-reason">
          <div class="reason-title">
            <i class="fa fa-flag"></i> 举报原因
          </div>
          <div class="reason-content">版权侵权，发布盗版内容，违反社区规定第9条</div>
        </div>
        
        <div class="report-actions">
          <button class="action-btn btn-secondary">查看</button>
          <button class="action-btn btn-primary">处理</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 处理中举报 -->
  <div class="tab-content" id="processing">
    <div class="report-list">
      <!-- 单图举报 -->
      <div class="report-item processing" data-id="2">
        <div class="report-header">
          <div class="report-user">
            <img src="https://picsum.photos/100/100?random=2" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">旅行者</div>
              <div class="report-time">昨天 16:45</div>
            </div>
          </div>
          <div class="report-status status-processing">处理中</div>
        </div>
        
        <div class="report-content">
          该用户发布的内容涉及虚假宣传，声称可以提供特殊服务，可能存在诈骗风险。
        </div>
        
        <div class="report-images">
          <div class="report-image">
            <img src="https://picsum.photos/200/200?random=13" alt="举报图片" class="report-image">
            <div class="image-count">1/1</div>
          </div>
        </div>
        
        <div class="report-reason">
          <div class="reason-title">
            <i class="fa fa-flag"></i> 举报原因
          </div>
          <div class="reason-content">虚假宣传，涉嫌诈骗，违反社区规定第7条</div>
        </div>
        
        <div class="report-actions">
          <button class="action-btn btn-secondary">查看</button>
          <button class="action-btn btn-primary">处理</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 已解决举报 -->
  <div class="tab-content" id="resolved">
    <div class="report-list">
      <!-- 无图举报 -->
      <div class="report-item resolved" data-id="3">
        <div class="report-header">
          <div class="report-user">
            <img src="https://picsum.photos/100/100?random=3" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">音乐爱好者</div>
              <div class="report-time">2023-10-25 11:30</div>
            </div>
          </div>
          <div class="report-status status-resolved">已解决</div>
        </div>
        
        <div class="report-content">
          在评论区对我进行人身攻击和辱骂，言语非常难听，已经影响到我的正常使用。
        </div>
        
        <div class="report-reason">
          <div class="reason-title">
            <i class="fa fa-flag"></i> 举报原因
          </div>
          <div class="reason-content">人身攻击，辱骂他人，违反社区规定第2条</div>
        </div>
        
        <div class="report-actions">
          <button class="action-btn btn-secondary">查看</button>
          <button class="action-btn btn-primary">详情</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 已驳回举报 -->
  <div class="tab-content" id="rejected">
    <div class="empty-state">
      <div class="empty-icon">
        <i class="fa fa-check-circle-o"></i>
      </div>
      <div class="empty-text">暂无已驳回的举报</div>
    </div>
  </div>
  
  <!-- 举报详情弹窗 -->
  <div class="detail-modal" id="reportDetail">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">举报详情</div>
        <button class="close-modal" id="closeDetail">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="detail-section">
          <div class="detail-title">
            <i class="fa fa-user"></i> 举报用户
          </div>
          <div class="report-user">
            <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">阳光正好</div>
              <div class="report-time">ID: user123456 · 注册时间: 2023-05-10</div>
            </div>
          </div>
        </div>
        
        <div class="detail-section">
          <div class="detail-title">
            <i class="fa fa-user-o"></i> 被举报用户
          </div>
          <div class="report-user">
            <img src="https://picsum.photos/100/100?random=20" alt="用户头像" class="user-avatar">
            <div class="user-info">
              <div class="user-name">夜色迷人</div>
              <div class="report-time">ID: user654321 · 注册时间: 2023-01-15</div>
            </div>
          </div>
        </div>
        
        <div class="detail-section">
          <div class="detail-title">
            <i class="fa fa-file-text-o"></i> 举报内容
          </div>
          <div class="detail-content">
            这个人发布的内容包含低俗图片，多次发布类似内容，严重影响社区氛围。希望平台能够严肃处理，维护良好的社区环境。
          </div>
        </div>
        
        <div class="detail-section">
          <div class="detail-title">
            <i class="fa fa-image"></i> 举报证据
          </div>
          <div class="detail-images">
            <img src="https://picsum.photos/400/400?random=10" alt="举报图片" class="detail-image">
            <img src="https://picsum.photos/400/400?random=11" alt="举报图片" class="detail-image">
            <img src="https://picsum.photos/400/400?random=12" alt="举报图片" class="detail-image">
          </div>
        </div>
        
        <div class="detail-section">
          <div class="detail-title">
            <i class="fa fa-flag"></i> 举报原因
          </div>
          <div class="detail-content">发布低俗色情内容，违反社区规定第3条</div>
        </div>
        
        <div class="detail-section">
          <div class="detail-title">
            <i class="fa fa-info-circle"></i> 举报信息
          </div>
          <div class="detail-meta">
            <div class="meta-item">
              <div class="meta-label">举报时间</div>
              <div class="meta-value">今天 09:24</div>
            </div>
            <div class="meta-item">
              <div class="meta-label">举报ID</div>
              <div class="meta-value">REP20231026001</div>
            </div>
            <div class="meta-item">
              <div class="meta-label">当前状态</div>
              <div class="meta-value"><span class="report-status status-pending">待处理</span></div>
            </div>
            <div class="meta-item">
              <div class="meta-label">被举报内容</div>
              <div class="meta-value">动态帖子《夜色中的美》</div>
            </div>
          </div>
        </div>
        
        <div class="detail-section">
          <div class="detail-title">
            <i class="fa fa-sticky-note-o"></i> 处理记录
          </div>
          <div class="processing-notes">
            <div class="notes-title">暂无处理记录</div>
            <div class="notes-content">请尽快处理该举报，确保社区环境健康。</div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="modal-btn btn-secondary">标记为已处理</button>
        <button class="modal-btn btn-primary">删除内容并警告</button>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-link">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-bell-o nav-icon"></i>
      <span>通知</span>
    </a>
    <a href="#" class="nav-link active">
      <i class="fa fa-flag-o nav-icon"></i>
      <span>举报</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 导航切换功能
    const tabItems = document.querySelectorAll('.tab-item');
    const tabContents = document.querySelectorAll('.tab-content');
    
    tabItems.forEach(item => {
      item.addEventListener('click', function() {
        // 移除所有激活状态
        tabItems.forEach(i => i.classList.remove('active'));
        tabContents.forEach(c => c.classList.remove('active'));
        
        // 添加当前激活状态
        this.classList.add('active');
        const tabId = this.getAttribute('data-tab');
        document.getElementById(tabId).classList.add('active');
      });
    });
    
    // 举报详情弹窗
    const reportDetailModal = document.getElementById('reportDetail');
    const closeDetail = document.getElementById('closeDetail');
    const viewButtons = document.querySelectorAll('.action-btn');
    
    // 打开弹窗
    viewButtons.forEach(button => {
      button.addEventListener('click', function() {
        reportDetailModal.classList.add('active');
      });
    });
    
    // 关闭弹窗
    closeDetail.addEventListener('click', function() {
      reportDetailModal.classList.remove('active');
    });
    
    // 点击弹窗外部关闭
    reportDetailModal.addEventListener('click', function(e) {
      if (e.target === reportDetailModal) {
        reportDetailModal.classList.remove('active');
      }
    });
    
    // 筛选功能
    const filterSelect = document.querySelector('.filter-select');
    filterSelect.addEventListener('change', function() {
      alert(`已筛选${this.value}的举报内容`);
    });
    
    // 搜索功能
    const searchInput = document.querySelector('.search-input');
    searchInput.addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        alert(`搜索内容: ${this.value}`);
      }
    });
  </script>
</body>
</html>
